import Taro, {Component} from '@tarojs/taro'
import {View, Text, Swiper, SwiperItem, Image, ScrollView} from '@tarojs/components'
import {getRuntime} from "../../utils/common";
import {IStoreProps} from '../../store/Stores'
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'

import FooterInfo from '../../components/FooterInfo'
import FooterMenu from '../../components/FooterMenu'
import './repaymentDetail.less'

import banner_01 from '../../assets/img/banner_01.jpg'
import nav_02 from '../../assets/img/nav_11.png'


interface IHomeProps extends IStoreProps {
}

@inject("stores")
@observer
class RepaymentDetail extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    navs: [
      {id: 1, title: '全部'},
      {id: 2, title: '已执行'},
      {id: 3, title: '待执行'},
    ],
    currentNavId: 1,
  }

  componentWillMount() {
    Taro.setNavigationBarTitle({title: '还款明细详情'})
  }

  componentDidMount() {
  }


  link(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

 setCurrentNavId(id: number) {
    this.setState({ currentNavId: id })
 }

  render() {
    let {navs,currentNavId} = this.state
    return (
      <View className='repayment-detail'>
        <View className='list-06-item list-08-item'>
          <View className='list-06-con view-con'>
            <Image className='left-img' src={require('../../assets/img/img_01.jpg')}/>
            <View className='center'>
              <View className='title'>建设银行(2655)</View>
              <View className='name font-dark'>信用卡 邓师</View>
            </View>
            <View className='left view-left'>
              <View className='status color-theme'>执行中</View>
              <View className='view-date'>2019-12-12 12:12</View>
            </View>
          </View>
          <View className='money-list'>
            <View className='money-item'>
              <View>
                <Text className='money yuan '>800.00</Text>
              </View>
              <View className='status f22'>已还金额</View>
            </View>
            <View className='money-item'>
              <View>
                <Text className='money yuan'>800.00</Text>
              </View>
              <View className='status f22'>待还金额</View>
            </View>
            <View className='money-item'>
              <View>
                <Text className='money yuan'>800.00</Text>
              </View>
              <View className='status f22'>起动金额</View>
            </View>
          </View>
        </View>


        <ScrollView
          className='scroll-column'
          scrollX
          scrollWithAnimation
        >
          {
            navs.map(item => {
              return (
                <View className={currentNavId === item.id?'scroll-column__title scroll-column__active':'scroll-column__title'}
                      onClick={this.setCurrentNavId.bind(this,item.id)}
                      style={{width: '33.33%'}}>{item.title}</View>
              )
            })
          }
        </ScrollView>

        <View className='list-07-item'>
          <Image className='left-img' src={require('../../assets/img/icon_25.png')}/>
          <View className='list-07-item__r'>
            <View className='center'>
              <View className='title'>
                <Text>消费金额</Text>
                <Text className='money yuan'>523.26</Text>
              </View>
              <View className='font-dark'>2019-12-12</View>
            </View>
            <View className='left'>
              <View className='status'>执行中</View>
              <View className='free-money'>手续费 <Text className='money yuan'>20.00</Text></View>
            </View>
          </View>
        </View>

        <View className='list-07-item'>
          <Image className='left-img' src={require('../../assets/img/icon_25.png')}/>
          <View className='list-07-item__r'>
            <View className='center'>
              <View className='title'>
                <Text>消费金额</Text>
                <Text className='money yuan'>523.26</Text>
              </View>
              <View className='font-dark'>2019-12-12</View>
            </View>
            <View className='left'>
              <View className='status status-warn'>执行中</View>
              <View className='free-money'>手续费 <Text className='money yuan'>20.00</Text></View>
            </View>
          </View>
        </View>

        <View className='list-07-item'>
          <Image className='left-img' src={require('../../assets/img/icon_25.png')}/>
          <View className='list-07-item__r'>
            <View className='center'>
              <View className='title'>
                <Text>消费金额</Text>
                <Text className='money yuan'>523.26</Text>
              </View>
              <View className='font-dark'>2019-12-12</View>
            </View>
            <View className='left'>
              <View className='status status-wait'>执行中</View>
              <View className='free-money'>手续费 <Text className='money yuan'>20.00</Text></View>
            </View>
          </View>
        </View>
      </View>
    )
  }
}

export default RepaymentDetail
